export const metadata = {
  title: 'Delicate Ascii Dots Effect',
  description:
    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
};

<ComponentCodePreview name='delicate-ascii-dots' type="separate" />

## Props

| Prop             | Type       | Default         | Description                                                                 |
| ---------------- | ---------- | ----------------| --------------------------------------------------------------------------- |
| `backgroundColor`| `string`   | `'#000000'`     | Background color of the canvas.                                             |
| `textColor`      | `string`   | `'85, 85, 85'`  | RGB color value for the ASCII text dots.                                    |
| `gridSize`       | `number`   | `80`            | Size of the grid for ASCII dot placement.                                   |
| `removeWaveLine` | `boolean`  | `true`          | Whether to remove the animated wave line (if true, the wave is not shown). |
| `animationSpeed` | `number`   | `0.75`          | Speed of the ASCII dot animation.                                           |
